<template>
  <div class="bg">
    <div class="common-header-logo">
      <img src="@/assets/logo.png" alt="logo" class="logo-img" />
      <div class="logo-text">
        <div class="logo-title">小白盒</div>
        <div class="logo-en">WhiteBox</div>
      </div>
    </div>
    <div class="login-box">
      <form class="login-form" @submit.prevent="submitReset">
        <div class="login-title">设 置 新 密 码</div>
        <div class="input-group">
          <input type="password" v-model="password" placeholder="新密码（≥6位）" required minlength="6" />
        </div>
        <div class="input-group">
          <input type="password" v-model="confirm" placeholder="确认新密码" required />
        </div>
        <button type="submit" class="login-btn">完成</button>
      </form>
    </div>
    <div class="footer-desc">
      <div class="footer-title">小白盒</div>
      <div class="footer-sub">最受欢迎的中文社区</div>
      <div class="footer-en">White Box</div>
    </div>
    <div v-if="showToast" class="custom-toast">{{ toastMsg }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const phone = ((route.query.phone || '') + '').trim();
const code = ((route.query.code || '') + '').trim();

const password = ref('');
const confirm = ref('');
const toastMsg = ref('');
const showToast = ref(false);
const showToastMsg = (msg) => { toastMsg.value = msg; showToast.value = true; setTimeout(() => { showToast.value = false; }, 1000); };

const submitReset = async () => {
  if (!password.value || password.value.length < 6) { showToastMsg('密码至少6位'); return; }
  if (password.value !== confirm.value) { showToastMsg('两次输入不一致'); return; }
  if (!/^\d{11}$/.test(phone)) { showToastMsg('手机号无效'); return; }
  if (!/^\d{6}$/.test(code)) { showToastMsg('验证码应为6位数字'); return; }
  try {
    const resp = await axios.post('/login_register/resetPasswordByPhone', {
      phone, code, newPassword: password.value
    });
    if (resp.data.success) {
      showToastMsg('重置成功，请登录');
      setTimeout(() => router.push('/login'), 1000);
    } else {
      showToastMsg(resp.data.message || '重置失败');
    }
  } catch (e) {
    showToastMsg('重置失败，请重试');
  }
};
</script>

<style>
.bg {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image: url("../assets/bg.png");
  background-size: cover;
}
.common-header-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  z-index: 100;
}
.logo-img { height:40px; width:40px; margin-right:12px; }
.logo-text { display:flex; flex-direction:column; justify-content:center; color:#fff; }
.logo-title { font-size:20px; font-weight:bold; letter-spacing:2px; }
.logo-en { font-size:12px; letter-spacing:1px; color:#bbb; }
.login-box {
  width: 300px;
  height: 320px;
  background-color: #ececec;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-left: 650px;
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form { width:100%; display:flex; flex-direction:column; gap:18px; }
.login-title { font-weight:bold; font-size:25px; color:#23272b; }
.input-group input { width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:16px; background:#fff; outline:none; transition:border 0.2s; }
.input-group input:focus { border:1.5px solid #23272b; }
.login-btn {
  background: linear-gradient(180deg, #23272b 0%, #43484d 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s;
}
.login-btn:hover { filter: brightness(1.15); }
.footer-desc { position:absolute; left:32px; bottom:130px; display:flex; flex-direction:column; align-items:flex-start; color:#fff; z-index:100; }
.footer-title { font-size:22px; font-weight:bold; margin-bottom:6px; }
.footer-sub { font-size:18px; font-weight:bold; margin-bottom:6px; }
.footer-en { font-size:15px; color:#bbb; }
.custom-toast { position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color:#fff; padding:16px 32px; border-radius:8px; font-size:18px; z-index:9999; box-shadow:0 2px 8px rgba(0,0,0,0.2); pointer-events:none; animation: fadeInOut 1s; }
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
</style>


